<template>
  <div class="focus-list">
    <top-header></top-header>

    <div class="common-list-body" v-fullheight>
      <template v-if="listSource && listSource.length">
        <a href="javascript:;" @click="goto(item)" class="list-item" v-for="(item, key) in listSource" :key="key">
          <div class="name">{{ item.projectName }}</div>
          <div class="status">
            <span>项目进展：</span>
            <span class="status-span" :class="`status-span-${item.projectStatus}`">{{ projectStatus[item.projectStatus] }}</span>
          </div>
          <div class="date">开始服务日期：{{ item.startDate }}</div>
        </a>
      </template>
      <empty-one v-else></empty-one>
    </div>
  </div>
</template>

<script lang="ts">
import { Component } from "vue-property-decorator";
import TopHeader from "@/components/TopHeader.vue";
import Api from "@/api";
import Base from "@/utils/base";
import Enum from "@/typings/Enum";
import EmptyOne from "@/components/EmptyOne.vue";

@Component({
  name: "ProjectFocus",
  components: {
    TopHeader,
    EmptyOne
  }
})
export default class ProjectFocus extends Base {
  private listSource: any[] = [];
  private projectStatus = Enum.ProjectStatus;

  private created() {
    this.$cPromise.all([this.getData()]);
  }

  private async getData() {
    const res = await Api.GetFocusProject();
    if (res.code === 200) {
      this.listSource = res.data;
    }
    return res;
  }

  /**
   * 跳转项目概况
   */
  private goto(item: any) {
    this.$router.push({
      name: "ProjectHome",
      query: { projectId: item.projectId }
    });
  }
}
</script>

<style lang="less" scoped>
.focus-list {
  .list-item {
    margin: 10px 10px 0px 10px;
    background: #ffffff;
    border-radius: 8px;
    // height: 125px;
    display: block;
    padding: 15px;
    .name {
      font-size: 16px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      word-break: break-all;
    }
    .status {
      margin-top: 10px;
      display: flex;
      align-content: center;
      color: #717787;
    }
    .status-span {
      padding: 0 6px;
      height: 18px;
      line-height: 18px;
      text-align: center;
      font-size: 12px;
      color: white;
      border-radius: 18px;
      background: #36cfc9;
    }
    .status-span-0 {
      background: #36cfc9;
    }
    .status-span-3 {
      background: #9ea9bc;
    }
    .date {
      color: #a1a6b3;
      margin-top: 8px;
    }
  }
}
</style>
